<template>
	<view class="es-cell-item" :style="{background:background,width:width,padding:padding}" @tap="onTap">
		<view class="es-cell-title">
			<text class="es-cell__name">{{title}}</text>
			<text class="is-required" v-if="required">*</text>
		</view>
		<view class="es-cell-right">
			<!-- 文本 -->
			<template v-if="type==='text'" >
				<text class="es-cell-right__text"
					:style="{lines: lines,'-webkit-line-clamp': lines,color:value?activeColor:textColor}">{{value||placeholder}}</text>
				<!-- 单位 -->
				<text class="es-cell-right__text" v-if="value && unit" :style="{color:value?activeColor:textColor}">{{unit}}</text>
				<!-- 箭头按钮 -->
				<text class="esfont es-cell__icon--arrow" v-if="showArrow">&#xe6d5;</text>
			</template>
		
			<!-- 输入框 -->
			<template v-else-if="type==='input'">
				<input  v-model="inputValue" :disabled="disabled" :type="inputType"
					:maxlength="maxlength" @input="onInput" @blur="onBlur"  :placeholder="placeholder" class="es-cell-right__input">
				<!-- 输入框单位 -->
				<text class="es-cell-right__unit" v-if="unit">{{unit}}</text>
				<!-- 清空按钮 -->
				<text class="esfont es-cell__icon--clear" v-if="value && showClear" @tap="onClear">&#xe6f8;</text>
			</template>
		
			<!-- 开关按钮 -->
			<switch v-else-if="type==='switch'"  @change="onChangeSwitch" :checked="checked" :color="color" 
			:disabled="disabled" 	style="transform: scale(0.7) translateX(15%)"></switch>
			
			<!-- 图片-->
			<template v-if="type==='image' " >
				<image v-if="value" :src="value" :style="{width:imageWidth,height:imageHeight,imageRadius:imageRadius}" mode="aspectFill"></image>
				<text class="es-cell-right__text" v-else
					:style="{lines: lines,'-webkit-line-clamp': lines,color:value?activeColor:textColor}">{{placeholder}}</text>
				<!-- 箭头按钮 -->
				<text class="esfont es-cell__icon--arrow" v-if="showArrow">&#xe6d5;</text>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			// 标题
			title:String,
			value:[String,Number],
			// 右侧内容类型 text文本 input-输入框 switch-开关
			type:{
				type:String,
				default:"text"
			},
			//空值占位符
			placeholder:String,
			background:{
				type:String,
				default:"#FFFFFF"
			},
			width:{
				type:String,
				default:"690rpx"
			},
			padding:{
				type:String,
				default:"25rpx 30rpx"
			},
			// 是否显示必填
			required:{
				type:Boolean,
				default:false
			},
			//行数
			lines:{
				type:String,
				default:"1"
			},
			// 没值的字体颜色
			textColor:{
				type:String,
				default:"#999999"
			},
			// 有值的字体颜色
			activeColor:{
				type:String,
				default:"#1E1E1E"
			},
			//输入框类型
			inputType:{
				type:String,
				default:"text"
			},
			//显示箭头
			showArrow:{
				type:Boolean,
				default:true
			},
			//是否禁用
			disabled:{
				type:Boolean,
				default:false
			},
			//输入框字数长度
			maxlength:{
				type:Number,
				default:140
			},
			// 开关颜色
			color:{
				type:String,
				default:"#45D4A8"
			},
			unit:{
				type:String,
				default:""
			},
			checked:{
				type:Boolean,
				default:false
			},
			imageWidth:{
				type:String,
				default:"60rpx"
			},
			imageHeight:{
				type:String,
				default:"60rpx"
			},
			imageRadius:{
				type:String,
				default:"8rpx"
			},
			showClear:{
				type:Boolean,
				default:false
			},
		},
		data(){
			return {
				inputValue:""
			}
		},
		watch:{
			value:{
				immediate:true,
				handler(val){
					this.inputValue = val;
				}
			}
		},
		methods:{
			onClear(e){
				e.stopPropagation();
				this.$emit("clear")
			},
			onTap(){
				this.$emit("click")
			},
			onChangeSwitch(e){
				this.$emit("switchChange",{name:this.name,value:e.detail.value})
			},
			onInput(e){
				this.$emit("input",e)
			},
			onBlur(e){
				this.$emit("blur",e)
			}
		}
	}
</script>

<style scoped>
	.es-cell-item{
		border-radius: 16rpx;
		background: #FFFFFF;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.es-cell-title{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	
	
	.es-cell__name{
		font-size: 30rpx;
		line-height: 40rpx;
		color: #111111;
	}
	
	.is-required{
		font-size: 26rpx;
		line-height: 26rpx;
		color: #F82530;
		margin-left: 5rpx;
	}
	
	.es-cell-right{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	
	.es-cell-right__text{
		font-size: 28rpx;
		line-height: 40rpx;
		color: #1E1E1E;
		max-width: 450rpx;
		text-overflow: ellipsis;
		overflow:hidden;
		word-wrap: break-all;
		
		/* #ifndef APP-NVUE */
	    display: -webkit-box;
		/* #endif */

	}
	
	.es-cell-right__input{
		width: 450rpx;
		height: 40rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #1E1E1E;
		text-align: right;
	}
	
	.es-cell-right__unit{
		font-size: 28rpx;
		line-height: 40rpx;
		font-family: bold;
		color: #1E1E1E;
		margin-left: 5rpx;
	}
	
	.es-cell__icon--arrow{
		font-size: 26rpx;
		line-height: 40rpx;
		color: #D6D6D6;
		margin-left: 10rpx;
	}
	
	.es-cell__icon--clear{
		font-size: 26rpx;
		line-height: 40rpx;
		color: #D6D6D6;
		margin-left: 10rpx;
	}
	
</style>